<template>
  <div>
    <div class="card-group dashboard-group">
      <el-card class="card-item" id="chart_radar"></el-card>
      <el-card class="card-item" id="chart2"></el-card>
      <el-card class="card-item" id="chart1"></el-card>
    </div>
    <div class="card-group dashboard-group">
      <el-card class="card-item1" id="chart5"></el-card>
      <el-card class="card-item1" id="chart3"></el-card>
    </div>
    <div class="dashboard-group">
      <el-card class="card-middle" id="chart4"></el-card>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { GetSkill } from './api'

export default {
  name: 'DashBoard1',
  data () {
    return {
    }
  },
  mounted () {
    this.init_radar()
    this.init_chart2()
    this.init_chart3()
    this.init_chart4()
    this.init_chart5()
    this.init_chart1()
  },
  methods: {
    // 技能雷达图
    init_radar () {
      GetSkill().then(res => {
        if (res.data) {
          console.log(res.data)
          const text = res.data.title
          const legend = res.data.legend
          const indicator = res.data.indicator
          const datas = res.data.datas
          const option = {
            title: {
              text: text
            },
            legend: {
              data: legend
            },
            radar: {
              // shape: 'circle',
              axisName: {
                color: '#fff',
                backgroundColor: '#666',
                borderRadius: 3,
                padding: [3, 5]
              },
              indicator: indicator
            },
            series: [
              {
                name: '编程技能',
                type: 'radar',
                data: [
                  {
                    value: datas,
                    name: legend[0],
                    symbol: 'rect',
                    symbolSize: 12,
                    label: {
                      show: true,
                      formatter: function (params) {
                        return params.value
                      }
                    },
                    areaStyle: {
                      color: new this.$echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                        {
                          color: 'rgba(255, 145, 124, 0.1)',
                          offset: 0
                        },
                        {
                          color: 'rgba(255, 145, 124, 0.9)',
                          offset: 1
                        }
                      ])
                    }
                  }
                  //   {
                  //     value: [5000, 14000, 28000, 26000, 42000, 21000],
                  //     name: '实际开销（Actual Spending）'
                  //   }
                ]
              }
            ]
          }
          const myChart = this.$echarts.init(document.getElementById('chart_radar'))
          myChart.setOption(option)
        } else {
          console.log('获取雷达数据失败')
        }
      })
    },

    init_chart2 () {
      const option = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: 'Less is More',
                fontSize: 80,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: '#000',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 3000,
                loop: true,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: 'black'
                    }
                  }
                ]
              }
            }
          ]
        }
      }

      const myChart = this.$echarts.init(document.getElementById('chart2'))
      myChart.setOption(option)
    },
    init_chart3 () {
      const axisData = [
        '周一',
        '周二',
        '周三',
        '很长很长的周四',
        '周五',
        '周六',
        '周日'
      ]
      const data = axisData.map(function (item, i) {
        return Math.round(Math.random() * 1000 * (i + 1))
      })
      const links = data.map(function (item, i) {
        return {
          source: i,
          target: i + 1
        }
      })
      links.pop()
      const option = {
        title: {
          text: '笛卡尔坐标系上的 Graph'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: axisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'graph',
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            symbolSize: 40,
            label: {
              show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            data: data,
            links: links,
            lineStyle: {
              color: '#2f4554'
            }
          }
        ]
      }
      const myChart = this.$echarts.init(document.getElementById('chart3'))
      myChart.setOption(option)
    },
    init_chart4 () {
      const option = {
        title: {
          text: '动态数据',
          subtext: '纯属虚构'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          data: ['最新成交价', '预购队列']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: (function () {
              var now = new Date()
              var res = []
              var len = 16
              while (len--) {
                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
                now = new Date(now - 2000)
              }
              return res
            })()
          },
          {
            type: 'category',
            boundaryGap: true,
            data: (function () {
              var res = []
              var len = 16
              while (len--) {
                res.push(10 - len - 1)
              }
              return res
            })()
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '价格',
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2]
          },
          {
            type: 'value',
            scale: true,
            name: '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: '预购队列',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: (function () {
              var res = []
              var len = 16
              while (len--) {
                res.push(Math.round(Math.random() * 1000))
              }
              return res
            })()
          },
          {
            name: '最新成交价',
            type: 'line',
            data: (function () {
              var res = []
              var len = 0
              while (len < 16) {
                res.push((Math.random() * 10 + 5).toFixed(1) - 0)
                len++
              }
              return res
            })()
          }
        ]
      }

      const app = { count: 0 }
      setInterval(function () {
        var axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')

        var data0 = option.series[0].data
        var data1 = option.series[1].data
        data0.shift()
        data0.push(Math.round(Math.random() * 1000))
        data1.shift()
        data1.push((Math.random() * 10 + 5).toFixed(1) - 0)

        option.xAxis[0].data.shift()
        option.xAxis[0].data.push(axisData)
        option.xAxis[1].data.shift()
        option.xAxis[1].data.push(app.count++)

        myChart.setOption(option)
      }, 6000)

      const myChart = this.$echarts.init(document.getElementById('chart4'))
      myChart.setOption(option)
    },
    init_chart5 () {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }

      const myChart = this.$echarts.init(document.getElementById('chart5'))
      myChart.setOption(option)
    },
    init_chart1 () {
      const data = [['2000-06-05', 116], ['2000-06-06', 129], ['2000-06-07', 135], ['2000-06-08', 86], ['2000-06-09', 73], ['2000-06-10', 85], ['2000-06-11', 73], ['2000-06-12', 68], ['2000-06-13', 92], ['2000-06-14', 130], ['2000-06-15', 245], ['2000-06-16', 139], ['2000-06-17', 115], ['2000-06-18', 111], ['2000-06-19', 309], ['2000-06-20', 206], ['2000-06-21', 137], ['2000-06-22', 128], ['2000-06-23', 85], ['2000-06-24', 94], ['2000-06-25', 71], ['2000-06-26', 106], ['2000-06-27', 84], ['2000-06-28', 93], ['2000-06-29', 85], ['2000-06-30', 73], ['2000-07-01', 83], ['2000-07-02', 125], ['2000-07-03', 107], ['2000-07-04', 82], ['2000-07-05', 44], ['2000-07-06', 72], ['2000-07-07', 106], ['2000-07-08', 107], ['2000-07-09', 66], ['2000-07-10', 91], ['2000-07-11', 92], ['2000-07-12', 113], ['2000-07-13', 107], ['2000-07-14', 131], ['2000-07-15', 111], ['2000-07-16', 64], ['2000-07-17', 69], ['2000-07-18', 88], ['2000-07-19', 77], ['2000-07-20', 83], ['2000-07-21', 111], ['2000-07-22', 57], ['2000-07-23', 55], ['2000-07-24', 60]]
      const dateList = data.map(function (item) {
        return item[0]
      })
      const valueList = data.map(function (item) {
        return item[1]
      })
      const option = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: dateList.length - 1
          }
        ],
        title: [
          {
            left: 'center',
            text: '每日访问次数'
          },
          {
            top: '55%',
            left: 'center',
            text: '每日改动次数'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateList
          },
          {
            data: dateList,
            gridIndex: 1
          }
        ],
        yAxis: [
          {},
          {
            gridIndex: 1
          }
        ],
        grid: [
          {
            bottom: '60%'
          },
          {
            top: '60%'
          }
        ],
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: valueList
          },
          {
            type: 'line',
            showSymbol: false,
            data: valueList,
            xAxisIndex: 1,
            yAxisIndex: 1
          }
        ]
      }
      const myChart = this.$echarts.init(document.getElementById('chart1'))
      myChart.setOption(option)
    }
  },
  computed: {
    ...mapState(['appName', 'navSide'])
  }
}
</script>

<style scoped>
.card-item {
  width: calc(100% / 3 - 4px);
  height: 450px;
  margin: 0 2px;
}

.card-item1 {
  width: calc(100% / 2 - 4px);
  height: 450px;
  margin: 0 2px;
}

.card-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card-middle {
  width: 100%;
  height: 300px;
}

.dashboard-group {
  margin-bottom: 10px;
}

.panel-top {
  width: 100%;
  height: 100%;
}
</style>
